'use strict';

/* 主面板 */

var React = require('react-native');

var {
	StyleSheet,
	View,
	Text,
	Image,
	ScrollView,
	TouchableHighlight,
} = React;

var TabNavigator = require('react-native-tab-navigator');
var Ionicons = require('react-native-vector-icons/Ionicons');
var UserView = require('./UserView');
var HomeView = require('./HomeView');
var SettingsView = require('./SettingsView');



module.exports = React.createClass({


	propTypes: {
		navigator: React.PropTypes.object.isRequired
	},

	getInitialState: function() {
		return {
			selectedTab: 'home'
		}
	},

	render: function() {
		//return <UserView navigator={this.props.navigator}/>
		return (
			<TabNavigator tabBarStyle={tabStyles.tabBarStyle}>
			  <TabNavigator.Item
			    selected={this.state.selectedTab === 'home'}
			    title="主 页"
			    titleStyle={tabStyles.TitleStyle}
			    selectedTitleStyle={tabStyles.SelectedTitleStyle}
			    renderIcon={()=>this.renderIcon('android-home')}
			    renderSelectedIcon={()=>this.renderSelectedIcon('android-home')}
			    onPress={() => this.setState({ selectedTab: 'home' })}>
				    <HomeView navigator={this.props.navigator}/>
			  </TabNavigator.Item>
			  <TabNavigator.Item
			    selected={this.state.selectedTab === 'cart'}
			    title="购物车"
			    titleStyle={tabStyles.TitleStyle}
			    selectedTitleStyle={tabStyles.SelectedTitleStyle}
			    badgeText="1"
 				renderIcon={()=>this.renderIcon('android-cart')}
			    renderSelectedIcon={()=>this.renderSelectedIcon('android-cart')}
			    onPress={() => this.setState({ selectedTab: 'cart' })}>
					{this.renderTabView('购物车')}
			  </TabNavigator.Item>
			  <TabNavigator.Item
			    selected={this.state.selectedTab === 'user'}
			    title="我 的"
			    titleStyle={tabStyles.TitleStyle}
			    selectedTitleStyle={tabStyles.SelectedTitleStyle}
 				renderIcon={()=>this.renderIcon('android-contact')}
			    renderSelectedIcon={()=>this.renderSelectedIcon('android-contact')}
			    onPress={() => this.setState({ selectedTab: 'user' })}>
					<UserView navigator={this.props.navigator}/>
			  </TabNavigator.Item>
			  <TabNavigator.Item
			    selected={this.state.selectedTab === 'settings'}
			    title="设 置"
			    titleStyle={tabStyles.TitleStyle}
			    selectedTitleStyle={tabStyles.SelectedTitleStyle}
 				renderIcon={()=>this.renderIcon('android-settings')}
			    renderSelectedIcon={()=>this.renderSelectedIcon('android-settings')}
			    onPress={() => this.setState({ selectedTab: 'settings' })}>
					<SettingsView navigator={this.props.navigator}/>
			  </TabNavigator.Item>
			</TabNavigator>
		);
	},

	renderIcon: function(iconName) {
		return (
			<Ionicons name={iconName} size={28} color={tabStyles.iconColor}  style={tabStyles.iconStyle}/>
		);
	},

	renderSelectedIcon: function(iconName) {
		return (
			<Ionicons name={iconName} size={28} color={tabStyles.selectedIconColor}  style={tabStyles.iconStyle}/>
		);
	},

	renderTabView: function(viewname) {
		return (
			<View style={styles.tabView}>
				<Text>{viewname}</Text>
			</View>
		)
	}
});


var styles = StyleSheet.create({
	tabView: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center'
	},

});

var tabStyles = {

	tabBarStyle: {
		height: 60,
		backgroundColor: '#DDD'
	},

	iconStyle: {
		width: 25,
	},

	iconColor: '#444',

	selectedIconColor: '#4169E1',

	TitleStyle: {
		color: '#444',
		fontSize: 12,
	},

	SelectedTitleStyle: {
		color: '#4169E1',
	}
}